<template>
	<view class="container">
		<show-tips></show-tips>
		<u-sticky>
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab" class="tab"></v-tabs>
		</u-sticky>
		<!-- <button @click="clear()">
			清空
		</button> -->
		<view class="flex-column coupon-main">
			<view class="item" v-for="(v, i) in coupons" :key="v.id" :style="v.show ? '' : 'display:none;'">
				<view class="top">
					<view class="left" @click="breakApp(v)">
						<view class="content">
							<u-image width="23px" height="23px" shape="circle" mode="widthFix" :lazy-load="true" :src="v.shopIcon">
							</u-image>
							<view class="name">{{ v.title }}</view>
						</view>
						<view class="text everDay" v-if="v.type == 1">天天可领</view>
						<view class="text timeLimit" v-else-if="v.type == 2">限时领取</view>
						<view class="text newPerson" v-else-if="v.type == 3">新人补贴</view>
					</view>
					<view class="right">
						<button open-type="share" :data-app="v">
							<u-icon name="zhuanfa" size="56"></u-icon>
						</button>
					</view>
				</view>
				<view class="bottom" @click="breakApp(v)">
					<!-- <u-image width="100%" height="100%" border-radius="10px" class="image" mode="widthFix" :lazy-load="true" :src="v.cover">
						<u-loading slot="loading"></u-loading>
					</u-image> -->
					<u-lazy-load border-radius="10" threshold="300" :image="v.cover" :index="v.id"></u-lazy-load>
				</view>
				<view class="user-star">
					<view @click="breakApp(v)">已有
						<u-count-to :start-val="0" :end-val="v.star" color="red" font-size="28" class="num"></u-count-to>
						人领取</view>
					<view>
						<u-button size="mini" ripple="true" @click="breakApp(v)" type="error">免费领取</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import vTabs from '../../wxcomponents/v-tabs/v-tabs.vue'
	import showTips from '../../wxcomponents/redflower-showTips/redflower-showTips.vue'
	export default {
		components: {
			showTips,
			vTabs
		},
		data() {
			return {
				allCover: "http://img.wwery.com/jack/6cecb0111095907.png",
				coupons: [],
				tempCoupons: [],
				tabs: [],
				current: 0,
			};
		},
		onShow: function() {
			this.boundParentUser();
			const shareApp = uni.getStorageSync("shareApp");
			if (!this.isNull(shareApp)) {
				this.init(shareApp.id, shareApp.categoryId);
			} else {
				if (this.current == 0 || this.isNull(this.coupons) || this.coupons.length == 0) {
					this.init(null, null);
				}
			}
		},
		onLoad(option) {
			if (!this.isNull(option.id) && !this.isNull(option.categoryId)) {
				//等待登录成功
				const shareApp = {
					id: option.id,
					categoryId: option.categoryId
				}
				uni.setStorageSync("shareApp", shareApp);
			}
			if (!this.isNull(option.userId)) {
				uni.setStorageSync("inviteUserId", option.userId);
				this.boundParentUser(option.userId);
			}
		},
		methods: {
			clear: function() {
				uni.clearStorageSync()
				const user = uni.getStorageSync("user");
				console.log("清空", user)
			},
			//通过id获取小程序
			getApp: function(_id, coupons) {
				if (!this.isNull(coupons)) {
					for (var x = 0; x < coupons.length; x++) {
						if (coupons[x]._id == _id) {
							return coupons[x];
						}
					}
				}
				return null;
			},
			// tab栏切换
			changeTab: function(index) {
				this.current = index;
				const app = this.tabs[index];
				let showSize = 0;
				let coupon;
				if (!this.isNull(app)) {
					for (var x = 0; x < this.coupons.length; x++) {
						coupon = this.coupons[x];
						coupon.show = coupon.categoryId == app.id;
						if (coupon.show) {
							showSize++;
						}
					}
				}
				if (showSize == 0) {
					for (var x = 0; x < this.coupons.length; x++) {
						coupon = this.coupons[x];
						coupon.show = true;
					}
				}
			},
			//跳转到新的页面
			breakApp: function(app) {
				const _this = this;
				if (this.isNull(app)) {
					return;
				}
				uni.navigateToMiniProgram({
					appId: app.appId,
					path: app.path,
					success(res) {
						// 打开成功
						_this.setAppStar(app);
					}
				})
			},
			//初始化加载
			init: function(id, categoryId) {
				//用户登录获取用户信息
				this.$u.get(`/wxAppCategory/list/${this.systemId}`).then(res => {
					if (res.code != 200) {
						return;
					}
					this.tabs = res.data;
					this.current = this.getAppSelect(res.data, categoryId);
				});
				//用户登录获取用户信息
				this.$u.get(`/weChatAppLink/list/${this.systemId}`).then(res => {
					if (res.code != 200) {
						return;
					}
					this.coupons = this.getShareCouponApp(res.data, id);
				});
			},
			//获取选中的角标
			getAppSelect: function(appCategorys, categoryId) {
				let appCategory;
				for (var x = 0; x < appCategorys.length; x++) {
					appCategory = appCategorys[x];
					if (appCategory.id == categoryId) {
						uni.setStorageSync("shareApp", null);
						return x;
					}
				}
				return 0;
			},
			//获取分享显示的小程序券
			getShareCouponApp: function(coupons, _id) {
				for (var x = 0; x < coupons.length; x++) {
					if (this.isNull(_id)) {
						coupons[x].show = true;
					} else {
						coupons[x].show = coupons[x].id == _id
					}
				}
				return coupons;
			},
			//分享好友
			onShareAppMessage(res) {
				let path = "/pages/index/index";
				if (res.from === 'button') {
					// 来自页面内分享按钮
					const app = res.target.dataset.app;
					path += "?id=" + app.id + "&categoryId=" + app.categoryId;
					this.setAppStar(app);
				}
				return this.getShareInfo(path);
			},
			//uniapp微信小程序分享页面到微信朋友圈
			onShareTimeline() {
				return this.getShareInfo();
			},
			//设置小程序领取数量
			setAppStar: function(app) {
				this.$u.put('/weChatAppLink/upStar', {
					id: app.id
				}).then(res => {
					if (res.code != 200) {
						return;
					}
					app.star = res.data.star;
				});
			}
		}
	};
</script>
<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.container {
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;

		.logo-main {
			background-color: #FFFFFF;
			padding: 10px 20px 0px 20px;
			justify-content: space-between;
			box-sizing: border-box;

			.logo-item {
				align-items: center;

				.logo {}

				.title {
					margin: 5px 0px;
					color: #929292;
				}
			}
		}

		.coupon-main {
			margin: 10px 8px;
			box-sizing: border-box;


			.item {
				background-color: #ffffff;
				border-radius: 10px;
				padding: 5px 10px;
				display: flex;
				flex-direction: column;
				margin-bottom: 10px;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					align-content: center;

					.left {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 80%;
						align-content: center;

						.content {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							.icon {
								vertical-align: bottom;
								width: 52rpx;
								height: auto;
								border-radius: 50%;
							}

							.name {
								vertical-align: bottom;
								font-size: 34rpx;
								color: #000;
								line-height: 50rpx;
								font-weight: bold;
								margin-left: 5px;
							}
						}


						.text {
							padding: 0px 5px;
							height: 38rpx;
							line-height: 38rpx;
							text-align: center;
							font-size: 24rpx;
							color: #61300e;
							border-radius: 6rpx;
						}

						.everDay {
							background-color: #ffb700;
							color: #FFFF;
						}

						.timeLimit {
							background-color: red;
							color: #FFFF;
						}

						.newPerson {
							background-color: green;
							color: #FFFF;
						}
					}



					.right {
						display: flex;
						flex-direction: row;
						align-items: center;
						align-content: center;
						align-self: center;

						button {
							height: 40px;
							line-height: 40px;
							background-color: #FFFF;
						}

						button::after {
							border: 0px solid #FFFFFF;
							align-items: center;
							align-content: center;
						}
					}
				}

				.bottom {
					height: auto;
					width: 100%;
				}

				.user-star {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 5px;

					.num {
						margin: 0px 5px;
					}
				}
			}
		}
	}
</style>
